<template>
  <div class="dashboard-editor-container">
    <el-row>
      <el-col :span="3">
        <el-button class="bt" @click="displayChart='carTem'" type="primary">冷藏车温度报警</el-button>
        <el-button class="bt" @click="displayChart='carHum'" type="primary">冷藏车湿度报警</el-button>
        <el-button class="bt" @click="displayChart='houseTem'" type="primary">冷库温度报警</el-button>
        <el-button class="bt" @click="displayChart='houseHum'" type="primary">冷库湿度报警</el-button>
        <el-button class="bt" @click="displayChart='allHum'" type="primary">全部湿度报警</el-button>
        <el-button class="bt" @click="displayChart='deviceState'" type="primary">设备状态比例</el-button>
      </el-col>
      <el-col :span="21" v-if="displayChart=='carTem'">
        <iframe
          width="1000"
          height="400"
          seamless
          frameBorder="0"
          scrolling="no"
          src="http://192.168.222.222:8088/superset/explore/?form_data=%7B%22queryFields%22%3A%7B%22metrics%22%3A%22metrics%22%2C%22groupby%22%3A%22groupby%22%7D%2C%22datasource%22%3A%223__table%22%2C%22viz_type%22%3A%22line%22%2C%22slice_id%22%3A5%2C%22url_params%22%3A%7B%7D%2C%22time_range_endpoints%22%3A%5B%22inclusive%22%2C%22exclusive%22%5D%2C%22granularity_sqla%22%3A%22__time%22%2C%22time_grain_sqla%22%3A%22PT1M%22%2C%22time_range%22%3A%22No+filter%22%2C%22metrics%22%3A%5B%22count%22%5D%2C%22adhoc_filters%22%3A%5B%7B%22clause%22%3A%22WHERE%22%2C%22comparator%22%3A%220%22%2C%22expressionType%22%3A%22SIMPLE%22%2C%22filterOptionName%22%3A%22filter_gu084kaoe9j_0bjzvj1yj6ff%22%2C%22isExtra%22%3Afalse%2C%22isNew%22%3Afalse%2C%22operator%22%3A%22%3E%22%2C%22sqlExpression%22%3Anull%2C%22subject%22%3A%22alertTem%22%7D%2C%7B%22clause%22%3A%22WHERE%22%2C%22comparator%22%3A%222%22%2C%22expressionType%22%3A%22SIMPLE%22%2C%22filterOptionName%22%3A%22filter_6jy1ykkf0z4_nypyywofe4n%22%2C%22isExtra%22%3Afalse%2C%22isNew%22%3Afalse%2C%22operator%22%3A%22%3D%3D%22%2C%22sqlExpression%22%3Anull%2C%22subject%22%3A%22hostType%22%7D%5D%2C%22groupby%22%3A%5B%22hostName%22%5D%2C%22order_desc%22%3Atrue%2C%22row_limit%22%3A50000%2C%22color_scheme%22%3A%22supersetColors%22%2C%22label_colors%22%3A%7B%7D%2C%22show_brush%22%3A%22auto%22%2C%22show_legend%22%3Atrue%2C%22rich_tooltip%22%3Atrue%2C%22line_interpolation%22%3A%22linear%22%2C%22bottom_margin%22%3A%22auto%22%2C%22x_ticks_layout%22%3A%22auto%22%2C%22x_axis_format%22%3A%22smart_date%22%2C%22left_margin%22%3A%22auto%22%2C%22y_axis_format%22%3A%22SMART_NUMBER%22%2C%22y_axis_bounds%22%3A%5Bnull%2Cnull%5D%2C%22rolling_type%22%3A%22None%22%2C%22comparison_type%22%3A%22values%22%2C%22annotation_layers%22%3A%5B%5D%7D&standalone=true&height=400"
        >
        </iframe>
      </el-col>
      <el-col :span="21" v-if="displayChart=='houseTem'">
        <iframe
          width="1000"
          height="400"
          seamless
          frameBorder="0"
          scrolling="no"
          src="http://192.168.222.222:8088/superset/explore/?form_data=%7B%22queryFields%22%3A%7B%22metrics%22%3A%22metrics%22%2C%22groupby%22%3A%22groupby%22%7D%2C%22datasource%22%3A%223__table%22%2C%22viz_type%22%3A%22line%22%2C%22slice_id%22%3A6%2C%22url_params%22%3A%7B%7D%2C%22time_range_endpoints%22%3A%5B%22inclusive%22%2C%22exclusive%22%5D%2C%22granularity_sqla%22%3A%22__time%22%2C%22time_grain_sqla%22%3A%22PT1M%22%2C%22time_range%22%3A%22No+filter%22%2C%22metrics%22%3A%5B%22count%22%5D%2C%22adhoc_filters%22%3A%5B%7B%22clause%22%3A%22WHERE%22%2C%22comparator%22%3A%220%22%2C%22expressionType%22%3A%22SIMPLE%22%2C%22filterOptionName%22%3A%22filter_ijq03zbgmob_sweyr4hnboi%22%2C%22isExtra%22%3Afalse%2C%22isNew%22%3Afalse%2C%22operator%22%3A%22%3E%22%2C%22sqlExpression%22%3Anull%2C%22subject%22%3A%22alertHum%22%7D%2C%7B%22clause%22%3A%22WHERE%22%2C%22comparator%22%3A%220%22%2C%22expressionType%22%3A%22SIMPLE%22%2C%22filterOptionName%22%3A%22filter_i2oiqkcq51s_smbtyus8xx%22%2C%22isExtra%22%3Afalse%2C%22isNew%22%3Afalse%2C%22operator%22%3A%22%3D%3D%22%2C%22sqlExpression%22%3Anull%2C%22subject%22%3A%22hostType%22%7D%5D%2C%22groupby%22%3A%5B%22hostName%22%5D%2C%22order_desc%22%3Atrue%2C%22row_limit%22%3A50000%2C%22color_scheme%22%3A%22supersetColors%22%2C%22label_colors%22%3A%7B%7D%2C%22show_brush%22%3A%22auto%22%2C%22show_legend%22%3Atrue%2C%22rich_tooltip%22%3Atrue%2C%22line_interpolation%22%3A%22linear%22%2C%22bottom_margin%22%3A%22auto%22%2C%22x_ticks_layout%22%3A%22auto%22%2C%22x_axis_format%22%3A%22smart_date%22%2C%22left_margin%22%3A%22auto%22%2C%22y_axis_format%22%3A%22SMART_NUMBER%22%2C%22y_axis_bounds%22%3A%5Bnull%2Cnull%5D%2C%22rolling_type%22%3A%22None%22%2C%22comparison_type%22%3A%22values%22%2C%22annotation_layers%22%3A%5B%5D%7D&standalone=true&height=400"
        >
        </iframe>
      </el-col>
      <el-col :span="21" v-if="displayChart=='carHum'">
        <iframe
          width="1000"
          height="400"
          seamless
          frameBorder="0"
          scrolling="no"
          src="http://192.168.222.222:8088/superset/explore/?form_data=%7B%22queryFields%22%3A%7B%22metrics%22%3A%22metrics%22%2C%22groupby%22%3A%22groupby%22%7D%2C%22datasource%22%3A%223__table%22%2C%22viz_type%22%3A%22line%22%2C%22slice_id%22%3A10%2C%22url_params%22%3A%7B%7D%2C%22time_range_endpoints%22%3A%5B%22inclusive%22%2C%22exclusive%22%5D%2C%22granularity_sqla%22%3A%22__time%22%2C%22time_grain_sqla%22%3A%22PT10M%22%2C%22time_range%22%3A%22No+filter%22%2C%22metrics%22%3A%5B%22count%22%5D%2C%22adhoc_filters%22%3A%5B%7B%22clause%22%3A%22WHERE%22%2C%22comparator%22%3A%220%22%2C%22expressionType%22%3A%22SIMPLE%22%2C%22filterOptionName%22%3A%22filter_1pzg6pi12zl_dxtsuuyhnm9%22%2C%22isExtra%22%3Afalse%2C%22isNew%22%3Afalse%2C%22operator%22%3A%22%3E%22%2C%22sqlExpression%22%3Anull%2C%22subject%22%3A%22alertHum%22%7D%2C%7B%22clause%22%3A%22WHERE%22%2C%22comparator%22%3A%222%22%2C%22expressionType%22%3A%22SIMPLE%22%2C%22filterOptionName%22%3A%22filter_6pyvjk3xkl_l1dznzkuja%22%2C%22isExtra%22%3Afalse%2C%22isNew%22%3Afalse%2C%22operator%22%3A%22%3D%3D%22%2C%22sqlExpression%22%3Anull%2C%22subject%22%3A%22hostType%22%7D%5D%2C%22groupby%22%3A%5B%22hostName%22%5D%2C%22order_desc%22%3Atrue%2C%22row_limit%22%3A50000%2C%22color_scheme%22%3A%22supersetColors%22%2C%22label_colors%22%3A%7B%7D%2C%22show_brush%22%3A%22auto%22%2C%22show_legend%22%3Atrue%2C%22rich_tooltip%22%3Atrue%2C%22line_interpolation%22%3A%22linear%22%2C%22bottom_margin%22%3A%22auto%22%2C%22x_ticks_layout%22%3A%22auto%22%2C%22x_axis_format%22%3A%22smart_date%22%2C%22left_margin%22%3A%22auto%22%2C%22y_axis_format%22%3A%22SMART_NUMBER%22%2C%22y_axis_bounds%22%3A%5Bnull%2Cnull%5D%2C%22rolling_type%22%3A%22None%22%2C%22comparison_type%22%3A%22values%22%2C%22annotation_layers%22%3A%5B%5D%7D&standalone=true&height=400"
        >
        </iframe>
      </el-col>
      <el-col :span="21" v-if="displayChart=='houseHum'">
        <iframe
          width="1000"
          height="400"
          seamless
          frameBorder="0"
          scrolling="no"
          src="http://192.168.222.222:8088/superset/explore/?form_data=%7B%22queryFields%22%3A%7B%22metrics%22%3A%22metrics%22%2C%22groupby%22%3A%22groupby%22%2C%22columns%22%3A%22groupby%22%7D%2C%22datasource%22%3A%223__table%22%2C%22viz_type%22%3A%22dist_bar%22%2C%22slice_id%22%3A7%2C%22url_params%22%3A%7B%7D%2C%22time_range_endpoints%22%3A%5B%22inclusive%22%2C%22exclusive%22%5D%2C%22granularity_sqla%22%3A%22__time%22%2C%22time_range%22%3A%22No+filter%22%2C%22metrics%22%3A%5B%22count%22%5D%2C%22adhoc_filters%22%3A%5B%7B%22clause%22%3A%22WHERE%22%2C%22comparator%22%3A%220%22%2C%22expressionType%22%3A%22SIMPLE%22%2C%22filterOptionName%22%3A%22filter_wa1hza31rpm_aid7jm63fyo%22%2C%22isExtra%22%3Afalse%2C%22isNew%22%3Afalse%2C%22operator%22%3A%22%3E%22%2C%22sqlExpression%22%3Anull%2C%22subject%22%3A%22alertHum%22%7D%2C%7B%22clause%22%3A%22WHERE%22%2C%22comparator%22%3A%220%22%2C%22expressionType%22%3A%22SIMPLE%22%2C%22filterOptionName%22%3A%22filter_af3uro2mdvi_i6vuyyku3mq%22%2C%22isExtra%22%3Afalse%2C%22isNew%22%3Afalse%2C%22operator%22%3A%22%3D%3D%22%2C%22sqlExpression%22%3Anull%2C%22subject%22%3A%22hostType%22%7D%5D%2C%22groupby%22%3A%5B%22hostName%22%5D%2C%22columns%22%3A%5B%5D%2C%22row_limit%22%3A50000%2C%22color_scheme%22%3A%22presetColors%22%2C%22label_colors%22%3A%7B%7D%2C%22show_legend%22%3Atrue%2C%22show_bar_value%22%3Atrue%2C%22bar_stacked%22%3Afalse%2C%22order_bars%22%3Afalse%2C%22y_axis_format%22%3A%22SMART_NUMBER%22%2C%22bottom_margin%22%3A%22auto%22%2C%22x_ticks_layout%22%3A%22auto%22%7D&standalone=true&height=400"
        >
        </iframe>
      </el-col>
      <el-col :span="21" v-if="displayChart=='allHum'">
        <iframe
          width="1000"
          height="400"
          seamless
          frameBorder="0"
          scrolling="no"
          src="http://192.168.222.222:8088/superset/explore/?form_data=%7B%22queryFields%22%3A%7B%22metrics%22%3A%22metrics%22%2C%22groupby%22%3A%22groupby%22%2C%22columns%22%3A%22groupby%22%7D%2C%22datasource%22%3A%223__table%22%2C%22viz_type%22%3A%22dist_bar%22%2C%22slice_id%22%3A8%2C%22url_params%22%3A%7B%7D%2C%22time_range_endpoints%22%3A%5B%22inclusive%22%2C%22exclusive%22%5D%2C%22granularity_sqla%22%3A%22__time%22%2C%22time_range%22%3A%22No+filter%22%2C%22metrics%22%3A%5B%22count%22%5D%2C%22adhoc_filters%22%3A%5B%7B%22clause%22%3A%22WHERE%22%2C%22comparator%22%3A%220%22%2C%22expressionType%22%3A%22SIMPLE%22%2C%22filterOptionName%22%3A%22filter_tuq2pp3ctid_z8smtpbpkp%22%2C%22isExtra%22%3Afalse%2C%22isNew%22%3Afalse%2C%22operator%22%3A%22%3E%22%2C%22sqlExpression%22%3Anull%2C%22subject%22%3A%22alertHum%22%7D%5D%2C%22groupby%22%3A%5B%22hostName%22%5D%2C%22columns%22%3A%5B%5D%2C%22row_limit%22%3A50000%2C%22color_scheme%22%3A%22bnbColors%22%2C%22label_colors%22%3A%7B%7D%2C%22show_legend%22%3Atrue%2C%22show_bar_value%22%3Atrue%2C%22y_axis_format%22%3A%22SMART_NUMBER%22%2C%22bottom_margin%22%3A%22auto%22%2C%22x_ticks_layout%22%3A%22auto%22%7D&standalone=true&height=400"
        >
        </iframe>
      </el-col>
      <el-col :span="21" v-if="displayChart=='deviceState'">
        <iframe
          width="600"
          height="400"
          seamless
          frameBorder="0"
          scrolling="no"
          src="http://192.168.222.222:8088/superset/explore/?form_data=%7B%22queryFields%22%3A%7B%22metric%22%3A%22metrics%22%2C%22groupby%22%3A%22groupby%22%7D%2C%22datasource%22%3A%223__table%22%2C%22viz_type%22%3A%22pie%22%2C%22slice_id%22%3A9%2C%22url_params%22%3A%7B%7D%2C%22time_range_endpoints%22%3A%5B%22inclusive%22%2C%22exclusive%22%5D%2C%22granularity_sqla%22%3A%22__time%22%2C%22time_range%22%3A%22No+filter%22%2C%22metric%22%3A%22count%22%2C%22adhoc_filters%22%3A%5B%7B%22clause%22%3A%22WHERE%22%2C%22comparator%22%3A%22%22%2C%22expressionType%22%3A%22SIMPLE%22%2C%22filterOptionName%22%3A%22filter_07h2c49vd0r_suuyduqglar%22%2C%22isExtra%22%3Afalse%2C%22isNew%22%3Afalse%2C%22operator%22%3A%22%21%3D%22%2C%22sqlExpression%22%3Anull%2C%22subject%22%3A%22deviceStatus%22%7D%5D%2C%22groupby%22%3A%5B%22deviceStatus%22%5D%2C%22row_limit%22%3A25%2C%22pie_label_type%22%3A%22key%22%2C%22number_format%22%3A%22SMART_NUMBER%22%2C%22show_legend%22%3Atrue%2C%22show_labels%22%3Atrue%2C%22labels_outside%22%3Atrue%2C%22color_scheme%22%3A%22supersetColors%22%2C%22label_colors%22%3A%7B%7D%7D&standalone=true&height=400"
        >
        </iframe>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <map-chart :chart-data="mapData"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>

  import mapChart from "@/views/dashboard/MapChart";
  import {listLatestMessages} from "@/api/manage/druid";

  export default {
    name: 'Index',
    components: {
      mapChart
    },
    data() {
      return {
        displayChart: 'carTem',
        mapData: null
      }
    },
    methods: {
      getLatestMessage(){
        listLatestMessages().then(response => {
          let data = [];
          for (let i = 0; i < response.data.length; i++) {
            let msg = response.data[i];
            data.push({
              name: msg.hostName,
              value: [parseFloat(msg.lon),parseFloat(msg.lat)],
              tem: msg.tem,
              hum: msg.hum
            })
          }
          this.mapData = data;
        })
      }
    },
    mounted() {
      setInterval(() => {
        this.getLatestMessage()
      },5000)
    }
  }
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  .bt{
    width: 150px;
    height: 40px;
    margin: 5px;
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
